<template>
  <div class="number_box" v-if="showNum">
    <div v-for="(item, index) in newNum" :key="index" class="num_item">
      <div :class="item != oldNum[index] ? 'flip' : ''">{{ item }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    number: {
      type: [String, Number],
      default: 0,
    },
  },
  data() {
    return {
      newNum: [],
      oldNum: [],
      showNum: true,
    }
  },
  watch: {
    number(val1, val2) {
      if (val1 != val2) {
        this.newNum = this.handelNumber(val1)
        this.oldNum = this.handelNumber(val2)
        // this.showNum = false
        // this.$nextTick(() => {
        //   this.showNum = true
        // })
      }
    },
  },
  methods: {
    handelNumber(val) {
      return val.toString().split('')
    },
  },
}
</script>

<style scoped lang="scss">
div {
  box-sizing: border-box;
}
.number_box {
  display: flex;
  font-size: 40px;
  font-weight: bold;
  color: #c0faff;
  width: 100%;
  height: 10%;
  justify-content: space-between;
  padding: 0 10%;
  .num_item {
    width: 50px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../../assets/images/main/number_bg.svg') no-repeat;
    background-size: 100% 100%;
  }
  .flip {
    animation: flipOut 1s;
    animation-iteration-count: 1;
  }
}
@keyframes flipOut {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateX(90deg);
  }
}
</style>